<template>
  <ex-dialog width="1200px" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane :label="item.title" :name="item.id" v-for="(item,nIndex) in recommendList" :key="nIndex"></el-tab-pane>
    </el-tabs>
    <el-form ref="form" :model="form" :rules="rules" label-width="150">
      <el-form-item label="权益卡:" prop="id">
        <el-select v-model="form.id" placeholder="请选择权益卡" filterable multiple @change="changePunchActivityId">
          <el-option v-for="item in goodsList" :key="item.id" :label="item.cardName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="">
        <el-table :data="tabelList" v-loading="loading" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="加载中" stripe border>
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="活动名称" align="center" prop="activityName" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-if="scope.row.activityName">{{ scope.row.activityName }}</div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="发行店铺" align="center" prop="issuerShop" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-if="scope.row.issuerShop">{{ scope.row.issuerShop }}</div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="卡名称" align="center" prop="cardName" :show-overflow-tooltip="true" />
          <el-table-column label="卡功能" align="center" prop="functionType" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-if="scope.row.functionType == 1">权益NFR</div>
              <div v-if="scope.row.functionType == 2">勋章NFR</div>
              <div v-if="scope.row.functionType == 3">赚卡</div>
            </template>
          </el-table-column>
          <el-table-column label="发行方" align="center" prop="issuer" :show-overflow-tooltip="true" />
          <el-table-column label="上链时间" align="center" prop="chainTime" :show-overflow-tooltip="true" />
          <el-table-column label="售价" align="center" prop="price" :show-overflow-tooltip="true" />
          <el-table-column label="库存总量" align="center" prop="issueTotal" :show-overflow-tooltip="true" />
          <el-table-column label="剩余库存" align="center" prop="useable" :show-overflow-tooltip="true" />
          <el-table-column label="是否显示" align="center" prop="customerPhone" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isShow" active-value="1" inactive-value="2"
                @change="changeShenyeShopStatus($event, scope.row.id)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="排序" align="center" width="160px">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="orderClick(0, scope.$index)"
                v-if="scope.$index != 0">上移</el-button>
              <el-button size="mini" type="text" @click="orderClick(1, scope.$index)"
                v-if="scope.$index < tabelList.length - 1">下移</el-button>
              <el-button size="mini" type="text" @click="orderClick(2, scope.$index)"
                v-if="scope.$index == tabelList.length - 1">置顶</el-button>
              <el-button size="mini" type="text" @click="orderClick(3, scope.$index)"
                v-if="scope.$index != tabelList.length - 1">置底</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="deleteView(scope.$index, scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="sumitLoading">保存提交</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </ex-dialog>
</template>

<script>
import {
  getToken
} from "@/utils/auth";
import {
  equitylist,
  editEquityConfig,
  nfrSelect,
  recommendTypels
} from '@/api/incentiveManagement/adConfigNew'
export default {
  // dicts: ['asset_card_type'],
  name: "Dialog",
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    return {
      sumitLoading: false,
      loading: false,
      title: "配置推荐资产",
      activeName: '1',
      goodsList: [],
      tabelList: [],
      recommendList:[],//配置分类列表
      typeId:'',//配置推荐资产id
      form: {
        id: [],
      },
      punchActivityList: [
        {
          id: '',
          isShow: true,
          functionType: '',
        },
      ],
      // 表单校验
      rules: {
        punchActivityId: [{
          required: true,
          message: "请选择",
          trigger: 'change',
        }],
      },
    };
  },
  created() {
    console.log(this.pathType)
    this.getGoods()
    this.getRecommendTypels()
  },
  methods: {
    // 分类切换
    handleClick(tab) {
      this.typeId = tab.name
      this.getInfo()
    },
    // 获取分类配置列表
    getRecommendTypels() {
      recommendTypels().then(res => {
        this.recommendList = res.result
        if(res.result.length!=0){
          this.typeId = res.result[0].id
          this.getInfo()
        }
      })
    },
    //获取权益卡下拉
    getGoods() {
      var data = {
        cardName: this.cardName
      }
      nfrSelect(data).then(res => {
        this.goodsList = res.result
      })
    },
    //获取配置列表
    getInfo() {
      let data = {
        typeId: this.typeId
      }
      this.form.id = []
      equitylist(data).then(res => {
        res.result.forEach(item => {
          this.form.id.push(item.id)
        })
        this.tabelList = res.result
      })
    },
    // 选择卡
    changePunchActivityId(e, index) {
      this.tabelList = []
      this.form.id.forEach(item => {
        this.goodsList.forEach(aitem => {
          if (item == aitem.id) {
            this.tabelList.push(aitem)
          }
        })
      })
    },
    //取消
    handleClose(formName) {
      this.$emit('update:visible', false)
      this.reset();
    },
    reset() {
      this.$refs['form'].resetFields();
    },
    //确认
    handleConfirm() {
      this.$emit('success')
    },
    /** 删除提交按钮deleteWhite */
    deleteView(index, id) {
      this.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tabelList.splice(index, 1)
        this.form.id.forEach((item, indexs) => {
          if (item == id) {
            this.form.id.splice(indexs, 1)
          }
        })

      }).catch(() => { });
    },
    /** 执行按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          var data = {
            typeId: this.typeId,
            cardIdList: this.tabelList
          }
          this.sumitLoading = true
          editEquityConfig(data).then(response => {
            this.$message.success('执行成功');
            this.$emit('success')
            setTimeout(()=>{
              this.handleClose();
              this.sumitLoading = false;
            },800)
          }).catch(() => {
            this.sumitLoading = false;
          });
        }
      });
    },
    //是否显示
    changeShenyeShopStatus(e, id) {
      console.log(' this.tabelList', this.tabelList)

    },
    //上移、下移、置顶、置底
    orderClick(type, i) {

      // 深度拷贝原数组，因为下面会使用 splice 方法，避免影响原数组
      let arr = [...this.tabelList];
      // 默认下标 0
      let index = 0;
      // 判断
      switch (type) {
        case 0: {// 上移
          index = i === 0 ? i : (i - 1);
          break;
        }
        case 1: {// 下移
          index = i === arr.length - 1 ? i : (i + 1);
          break;
        }
        case 2: {// 置顶
          index = 0;
          break;
        }
        case 3: {// 置底
          index = arr.length - 1;
          break;
        }
      }
      // 先删除原有
      let item = arr.splice(i, 1);
      // 再删除新地方
      arr.splice(index, 0, item[0]);
      this.tabelList = arr;
    },
  }
};

</script>
<style scoped>
.main {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
}

.icon_yes {
  font-size: 28px;
  color: #67c23a;
}

.el-select {
  width: 640px;
}

.el-button {
  margin: 0 20px;
}
</style>
